<template>
    <div class="body">
        <div class="loginTop">
            <van-icon name="cross" @click="goback" />
            <span @click="isneedpsw=false,$store.commit('changeReg',{reg:false})" v-show="isneedpsw">免密码登录</span>
            <span @click="isneedpsw=true" v-show="isneedpsw===false">密码登录</span>
        </div>

        <div class="loginMain" >
<!--            密码登录-->
            <div class="pswLogin" v-if="isneedpsw" v-show="$store.state.Reg===false&&$store.state.Fog===false">
                <h2>密码登录</h2>
                <van-form @submit="onSubmit">
                    <van-field
                            v-model="username"
                            name="username"
                            placeholder="请输入账号"
                            :rules="[{ required: true, message: '请填写账号' }]"
                    />
                    <van-field
                            v-model="password"
                            type="password"
                            name="password"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <div style="margin: 26px 16px 16px;">
                        <van-button round block type="info" native-type="submit">登录</van-button>
                    </div>
                </van-form>
                <div style="margin-top: 15px;">
                    <span @click="$store.commit('changeReg',{reg:true})" style="cursor: pointer">立即注册！</span>
                    <span @click="$store.commit('changeFog',{Fog:true})" style="float: right;cursor: pointer">忘记密码？</span>
                </div>
            </div>
<!--            注册-->
            <div  v-show="$store.state.Reg">
                <Register></Register>
            </div>
<!--            忘记密码-->
            <div  v-show="$store.state.Fog">
                <FogPsw></FogPsw>
            </div>
<!--            手机号登录-->
            <div class="phoneLogin" v-if="isneedpsw===false">
            </div>
        </div>
        <div class="loginFot" v-show="$store.state.Reg===false&&$store.state.Fog===false">
            <a-icon type="qq" />
            <a-icon type="wechat" />
        </div>
    </div>
</template>

<script>

    import {login} from "../api/api";
    import Register from "../components/Register";
    import FogPsw from "../components/FogPsw";

    export default {
        name: "Login",
        components:{ Register,FogPsw},
        data() {
            return {
                username: '',
                password: '',
                isneedpsw:true,
            };
        },
        methods: {
            goback(){
                this.$store.commit('changeReg',{reg:false})
                this.$store.commit('changeFog',{Fog:false})
                this.$store.commit('changeActive',{active:0})
                this.$router.go(-1)
            },
            onSubmit() {
                // console.log('submit', values);
                login(this.username, this.password, true).then((res) => {

                    // console.log(res);
                    if(res.code===0){
                        this.code = res.code;
                        this.$message.success("登陆成功，欢迎回来")
                        this.visible=false
                        this.$store.commit('changeLogin',{isLogin:true,data:res.data})
                        this.$router.push('/mine')
                    }else{
                        this.$message.warning(res.msg);
                        // this.$store.commit('changeLogin',{isLogin:true,userinfo:res.userInfo})
                        // this.$store.state.isLogin=true
                    }

                });
            },
            // handleSubmit(e) {
            //     e.preventDefault();
            //     this.form.validateFields((err, values) => {
            //         if (!err) {
            //             console.log('Received values of form: ', values);
                        
            //         }
            //     });
            // },
        },
    }
</script>

<style scoped lang="less">
    .body{
        height:100vh;
    }
    .loginTop{
        box-sizing: border-box;
        width: 100%;
        height: 30px;
        padding: 10px;
        font-size: 20px;
        display: flex;
        justify-content: space-between;
    }
    .loginMain{
        width: 100%;
        box-sizing: border-box;
        margin-top: 10vh;
        padding: 10px;
        h2{
            text-align: center;
        }
    }
    .loginFot{
        width: 50%;
        margin: 30vh auto 0;
        font-size: 30px;
        display: flex;
        justify-content: space-around;
    }
    /deep/.ant-input{
        height: 50px;
        /*margin: 15px 0;*/
    }
    /deep/.van-field:nth-of-type(2){
        height: 50px;
        margin: 15px 0;
    }
    /deep/.van-button{
        margin-top: 30px;
        border-radius: 0;
    }
</style>